<template>
	<bigScreenContainer autoFullScreen>
		<div class="page_board" :style="{
			background: `url(${componentContent.imageMap['bg1']}) no-repeat center center`,
			'background-size': '50%',
		}">
			<div class="page_header" :style="{
				background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
				'background-size': '100% 100%',
			}">
				<span>腾 洋 光 学 仪 器</span>
			</div>
			<div class="page_content">
				<div class="left_menu">
					<div class="menu">
						<div @click="toPage('/model/SaleMap')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_left']})center no-repeat`,
							'background-size': '100% 100%',
						}">
							<div class="icon"><img :src="`${componentContent.imageMap['icon-menu9']}`" /></div>
								<div class="name">销售地图</div>
							</div>
						</div>
						<div class="menu">
							<div @click="toPage('/model/sellingcockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_left']})center no-repeat`,
							'background-size': '100% 100%',
						}">
								<div class="icon"><img :src="`${componentContent.imageMap['icon-menu1']}`" /></div>
									<div class="name">销售驾驶舱</div>
								</div>
							</div>
							<div class="menu">
								<div @click="toPage('/model/developcockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_left']})center no-repeat`,
							'background-size': '100% 100%',
						}">
									<div class="icon"><img :src="`${componentContent.imageMap['icon-menu2']}`" /></div>
										<div class="name">研发驾驶舱</div>
									</div>
								</div>
								<div class="menu">
									<div @click="toPage('/model/purchasecockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_left']})center no-repeat`,
							'background-size': '100% 100%',
						}">
										<div class="icon">
											<img :src="`${componentContent.imageMap['icon-menu3']}`" />
							</div>
											<div class="name">采购驾驶舱</div>
										</div>
									</div>
								</div>
								<div class="right_menu">
									<div class="menu">
										<div @click="toPage('/model/warehousecockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_right']})center no-repeat`,
							'background-size': '100% 100%',
						}">
											<div class="icon">
												<img :src="`${componentContent.imageMap['icon-menu4']}`" />
							</div>
												<div class="name">仓储驾驶舱</div>
											</div>
										</div>
										<div class="menu">
											<div @click="toPage('/model/productioncockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_right']})center no-repeat`,
							'background-size': '100% 100%',
						}">
												<div class="icon">
													<img :src="`${componentContent.imageMap['icon-menu5']}`" />
							</div>
													<div class="name">生产驾驶舱</div>
												</div>
											</div>
											<div class="menu">
												<div @click="toPage('/model/qualitycockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_right']})center no-repeat`,
							'background-size': '100% 100%',
						}">
													<div class="icon">
														<img :src="`${componentContent.imageMap['icon-menu6']}`" />
							</div>
														<div class="name">质量驾驶舱</div>
													</div>
												</div>
												<div class="menu">
													<div @click="toPage('/model/environmentalcockpit')" :style="{
							background: `url(${componentContent.imageMap['bg_menu_right']})center no-repeat`,
							'background-size': '100% 100%',
						}">
														<div class="icon">
															<img :src="`${componentContent.imageMap['icon-menu7']}`" />
							</div>
															<div class="name">环境驾驶舱</div>
														</div>
													</div>
												</div>
											</div>
										</div>
	</bigScreenContainer>
</template>
<script>
	export default {
	name: "mainPage",
	data() {
		return {
			componentContent,
		};
	},
	computed: {},
	mounted() {
	},
	methods: {
		toPage(path) {
			this.$router.push({ path: path })
		}
	},
};
</script>
<style scoped lang="scss">
	.page_board {
		width: 1920px;
		height: 1080px;
		background: #111726;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center center;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		line-height: normal;
	}

	.page_header {
		width: 1920px;
		height: 80px;
		line-height: 80px;
		background: url(./top.png) no-repeat;
		background-size: 100% 100%;
		font-weight: 600;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
	}

	.page_header span {
		font-weight: 600;
		font-size: 40px;
		color: #ffffff;
		text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
		background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		padding-top: 36px;
	}

	.left_menu {
		position: absolute;
		width: 300px;
		height: 960px;
		left: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.right_menu {
		position: absolute;
		width: 300px;
		height: 960px;
		right: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.page_content {
		position: relative;
	}

	.left_menu .menu {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		z-index: 2;
		opacity: 0.8;

		&>div {
			width: 300px;
			height: 180px;
			background: url("./bg-menu(1).png") center no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;


			&:not(:last-child) {
				margin-right: 48px;
			}

			.icon {
				width: 68px;
				height: 68px;
			}

			.name {
				background: url("./bg-menu-text.png") no-repeat;
				background-size: 100px 40px;
				background-position-x: center;
				background-position-y: 24px;
				padding-bottom: 10px;
				padding-top: 10px;
				font-weight: 600;
				font-size: 24px;
				color: #EEEEEE;
			}
		}
	}

	.right_menu .menu {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		z-index: 2;
		opacity: 0.8;

		&>div {
			width: 300px;
			height: 180px;
			background: url("./bg-menu(2).png") center no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:not(:last-child) {
				margin-right: 48px;
			}

			.icon {
				width: 68px;
				height: 68px;
			}

			.name {
				background: url("./bg-menu-text.png") no-repeat;
				background-size: 100px 40px;
				background-position-x: center;
				background-position-y: 24px;
				padding-bottom: 10px;
				padding-top: 10px;
				font-weight: 600;
				font-size: 24px;
				color: #EEEEEE;
			}
		}
	}
</style>